<template>
    <div class="pt44">
        <div id="iscrollBox"  @scroll= "scrollFuc">
            <dl>
                <dd v-for="item in recordArray" @click="toDetails(item)">
                    <div>
                        <span>交易金额: </span><span class="apply_money">{{item.goods_Amount}} 元</span>
                        <span v-bind:class="[item.trans_status=='A1'?'succeed':'fail']" class="fr">{{item.jymsg}}</span>
                    </div>
                    <div class="record_explain">
                        <span>{{item.transDate}}</span>
                        <span class="fr">{{item.jylxmsg}}</span>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</template>

<script>
var cm = require("../components/common.js");
var iscrollBoxDom;
export default  {
    name: 'Record',  // 组件名称
    data () {  // 数据
        return {
            msg: 'Record',
            pageNum:1,
            pageSize:8,
            recordArray:[],
            hasNextPage:true
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        init(){
            this.sHeight = window.innerHeight-44;
            $("#iscrollBox").css("height",this.sHeight+"px");
            iscrollBoxDom = $("#iscrollBox")[0];
        },
        scrollFuc(){

            console.log("iscorllMove" + iscrollBoxDom.scrollTop);
           if(iscrollBoxDom.scrollTop == 0){
                this.refreshData();

            }else if(iscrollBoxDom.scrollTop == (iscrollBoxDom.scrollHeight - this.sHeight)){
                console.log("滚动到底");
                if(this.hasNextPage){
                    this.pageNum++;
                    this.getRecord()
                }else{
                    this.$store.state.errorMsg = "没有更多交易记录";
                }

            }
        },
        refreshData(){
            this.pageNum = 1;
            this.getRecord()
        },
        handleData(theRecordArray){
            var jymsgMap = {
                "A1":"交易成功",
                "A2":"交易失败"
            }
            var jylxMap = {
                "01":"小通帮你借",
                "02":"小通帮你延"
            }
            this.hasNextPage = false;  // 是否有下有页
            if(theRecordArray.length == 8){
                this.hasNextPage = true;
            }
            for(var i=0,l=theRecordArray.length;i<l;i++){
                theRecordArray[i].jymsg = jymsgMap[theRecordArray[i].trans_status];
                if(theRecordArray[i].channal_no == "01"){
                    theRecordArray[i].jylxmsg = "小通帮你借"
                }else{
                    theRecordArray[i].jylxmsg = "小通帮你延"
                }
                theRecordArray[i].transDate = cm.getDateStrFormate1(theRecordArray[i].trans_date,"second");
            }
            if(this.pageNum == 1){
                this.recordArray = theRecordArray;
            }else{
                this.recordArray = this.recordArray.concat(theRecordArray);
            }

        },
        toDetails(detailItem){
            this.$store.state.detailItem = detailItem;
            location.hash = "#/orderDetail";
        },
        getRecord(){
            this.$store.state.showLoading = true;
            var paraments = {
                bizLicNo:this.$store.state.loginName,
                loginName: this.$store.state.loginName,
                token: this.$store.state.token,
                loginType: this.$store.state.loginType,
                openid: this.$store.state.openid,
                prdtNo:"0301",
                pageNumber:this.pageNum,
                pageSize:this.pageSize

            }
            var _this = this;
            $.post(XtsdCashierTradeServlet,paraments,function(rdata) {
                console.dir(rdata);
                setTimeout(function  () {
                    _this.$store.state.showLoading = false;
                },300)
                if(rdata.xtsd_trans_response && rdata.xtsd_trans_response.trans_info_arrays && rdata.xtsd_trans_response.trans_info_arrays.trans_info){
                    _this.handleData(rdata.xtsd_trans_response.trans_info_arrays.trans_info);
                }else{
                    var errorMsg = "未查到该账户的流水记录";
                    if(rdata.xtsd_trans_response && rdata.xtsd_trans_response.resp_msg){
                        errorMsg = rdata.xtsd_trans_response.resp_msg;
                    }
                    _this.$store.state.errorMsg = errorMsg;
                }
            })
        }
    },
    beforeMount:function  () {
        this.refreshData();
    },
    mounted:function() {
        this.init();
        this.$store.state.headerTitle = "交易记录";
    },
    beforeRouteLeave (to, from, next) {
        console.log("OrderDetailOrderDetail....");
        console.dir(to);
        if(to.name == "OrderDetail"){
           this.$store.state.headerTitle = "订单详情";
        }
        next();
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/vendors/weui-sass/src/style/base/mixin/setOnepx";
.record_type{
    margin:15px 0;
    div{
        text-align: center;
        &:first-child{
            display: inline-block;
            float: left;
            width: 50%
        }
    }
    span{
        display:inline-block;
        margin: auto;
        position:relative;
        &:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #ccc;
            color: #ccc;
        }
    }
    span.checked{
        &:after{
            border-bottom-color: #2792e4;
        }
    }
}

#iscrollBox{

    overflow: auto;
}

dl{
    padding: 0 15px;
    font-size: 14px;
    dd{
        background-color: #fff;
        padding:10px;
        line-height: 36px;
        color: #999;
        margin-top: 10px;
    }
    .record_explain{

        position: relative;
        &:before{
            @include setTopLine();
        }
        .weui-btn_mini{
            margin-top: 10px;
        }
    }
    .apply_money{
        font-size: 18px;
        color: #222;
    }
    .succeed{
        color: #2792e4;
    }
    .fail{
        color:#f01921;
    }
    .record_icon{
        display: inline-block;
        width:20px;
        height:20px;
        vertical-align: sub;
        margin-right: 5px;
        background-size: 100% 100%;
    }

}
</style>
